<template>
    <div id="bottom-bar" style="width: 100%; height: 280px"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'

import echarts from '@/echarts'

import { option } from './constant'
import { result } from '../../constant'

export default defineComponent({
    name: 'BottomBar',
    setup() {
        const constant = {
            option
        }
        onMounted(() => {
            const { option } = constant

            let total = result.map((item: any) => +item.totalSales)
            let expect = result.map((item: any) => +item.expectedSales)
            option.xAxis[0].data = result.map((item: any) => item.countyName)
            option.series[0].data = total
            option.series[1].data = expect
            const myChart = echarts.init(document.getElementById('bottom-bar'))
            myChart.setOption(option)
        })
        return {
            ...constant
        }
    }
})
</script>
